<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container" >
      <el-input
        v-model="infoForm.bookName"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入书名"
      />
      <el-input
        v-model="infoForm.author"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入作者"
      />
      <el-input
        v-model="infoForm.publisher"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入出版社"
      />

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="queryList(1)"
      >查找</el-button>

      <el-radio
        v-model="infoForm.bookState"
        :label="0"
        class="filter-item"
        @change="queryList(1)"
      >上架中图书</el-radio>
      <el-radio
        v-model="infoForm.bookState"
        :label="1"
        class="filter-item"
        @change="queryList(1)"
      >以下架图书</el-radio>

    </div>

    <!-- 查询结果 -->
    <div>
      <el-table
        v-loading="listLoading"
        :data="list"
        size="small"
        element-loading-text="正在查询中。。。"
        :height="tabHeight"
        fit
        highlight-current-row
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="作者">
                <span>{{ props.row.author }}</span>
              </el-form-item>
              <el-form-item label="类别">
                <span>{{ props.row.bookSort }}</span>
              </el-form-item>
              <el-form-item label="出版社">
                <span>{{ props.row.publisher }}</span>
              </el-form-item>
              <el-form-item label="图书简介">
                <span>{{ props.row.bookInfo }}</span>
              </el-form-item>
<!--              <el-form-item label="封面">-->
<!--                <span>{{ props.row.bookImage }}</span>-->
<!--              </el-form-item>-->
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200px" label="图书编号" prop="bookId"/>
        <el-table-column align="center" width="200px" label="书名" prop="bookName"/>
        <el-table-column align="center" width="200px" label="借出图书数" prop="borrowNum"/>
        <el-table-column align="center" width="200px" label="库存图书数" prop="stockNum"/>
        <el-table-column align="center" width="200px" label="图书总数" prop="bookNum"/>
        <el-table-column
          align="center"
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteBook(scope.row)" v-show="showButton">下架</el-button>
            <el-button type="text" size="small" @click="addBook(scope.row)" v-show="!showButton">上架</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

<!--    编辑或新增 弹框-->
    <el-dialog
      title="修改图书基本信息"
      :visible.sync="showDialog"
      width="30%">
      <el-form ref="form" :model="dialogForm" label-width="80px">
        <el-form-item label="图书名">
          <el-input v-model="dialogForm.bookName"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="dialogForm.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社">
          <el-input v-model="dialogForm.publisher"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="dialogForm.bookInfo"></el-input>
        </el-form-item>
        <el-form-item label="图书库存">
          <el-input v-model="dialogForm.stockNum"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateBook()">确定修改</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 分页角标-->
    <div class="fypage">
      <el-pagination
        v-show="total>0"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
    export default {
        name: "bookList",
        data(){
            return{
                infoForm: {
                    bookId:'',
                    bookName:'',
                    author:'',
                    bookSort:'',
                    publisher:'',
                    bookInfo:'',
                    bookImage:'',
                    borrowNum:0,
                    stockNum:0,
                    bookNum:0,
                    bookState:0,
                },
                dialogForm: {
                    bookId:'',
                    bookName:'',
                    author:'',
                    // bookSort:'',
                    publisher:'',
                    bookInfo:'',
                    // bookImage:'',
                    stockNum:0,
                    bookState:0,
                },
                list:[],
                total: 1,
                pageNum: 1,
                pageSize: 10,
                orderBy: '',
                sort: '',
                listLoading: false,
                tabHeight: 540,
                showButton: true,
                showDialog:false,

            }
        },

        created() {
            this.queryList(1)
        },

        watch:{
            'infoForm.bookState'(){
                if(this.infoForm.bookState === 0){
                    this.showButton = true
                }else {
                    this.showButton = false
                }
            },
        },

        methods: {

            //将记录图书原本的数据
            openDialog(row){
                this.showDialog = true
                this.dialogForm = row
                console.log(row)
            },

            //修改图书信息
            updateBook(){
                let self = this
                self.listLoading = true
                self.showDialog = false
                let data = {
                    'bookId':self.dialogForm.bookId || null, //图书id
                    'bookName':self.dialogForm.bookName || null, //图书名
                    'author':self.dialogForm.author || null, //作者
                    // 'bookSort':self.dialogForm.bookSort || null, //图书分类
                    'publisher':self.dialogForm.publisher || null, //出版社
                    'bookInfo':self.dialogForm.bookInfo || null, //图书简介
                    // 'bookImage':self.dialogForm.bookImage || null, //图书封面
                    'stockNum':self.dialogForm.stockNum || null, //图书库存数
                    'bookState':self.dialogForm.bookState, //图书状态 0-》上架，1-》以下架
                }
                self.$axios.post("/manage/book/updateBookData",data).then(res =>{
                    try {
                        self.list = res.data.data
                        self.total = res.data.total
                        self.listLoading = false
                    }catch(err){
                        self.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.listLoading = false
                })
            },

            //下架图书
            deleteBook(row){
                this.$confirm('《' + row.bookName + '》将被下架, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let self = this
                    self.listLoading = true
                    self.$axios.get("/manage/book/updateBookState",{
                        params:{
                            bookId: row.bookId,
                            bookState: 1
                        }
                    }).then(res =>{
                        try {
                            self.list = res.data.data
                            self.total = res.data.total
                            self.listLoading = false
                        }catch(err){
                            self.listLoading = false
                            self.$message.error(res.data.msg)
                        }
                    }).catch(err => {
                        self.$message.error("查询出错！！！！！")
                        self.listLoading = false
                    })

                }).catch(() => {
                })
            },

            //重新上架商品
            addBook(row){
                this.$confirm('《' + row.bookName + '》将重新上架, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let self = this
                    self.listLoading = true
                    self.$axios.get("/manage/book/updateBookState",{
                        params:{
                            bookId: row.bookId,
                            bookState: 0
                        }
                    }).then(res =>{
                        try {
                            self.list = res.data.data
                            self.total = res.data.total
                            self.listLoading = false
                        }catch(err){
                            self.listLoading = false
                            self.$message.error(res.data.msg)
                        }
                    }).catch(err => {
                        self.$message.error("查询出错！！！！！")
                        self.listLoading = false
                    })
                }).catch(() => {
                })
            },

            handleSizeChange(size){
                this.queryList()
            },
            handleCurrentChange(current){
                this.queryList(current)
            },

            //当前页数，排序字段，排序方式
            queryList(page,order,sortord){
                const self = this
                self.listLoading = true
                self.pageNum = page
                self.orderBy = order
                self.sort = sortord
                let data = {
                    'bookName':self.infoForm.bookName || null, //图书名
                    'author':self.infoForm.author || null, //作者
                    'bookSort':self.infoForm.bookSort || null, //图书分类
                    'publisher':self.infoForm.publisher || null, //出版社
                    'bookInfo':self.infoForm.bookInfo || null, //图书简介
                    'bookImage':self.infoForm.bookImage || null, //图书封面
                    'borrowNum':self.infoForm.borrowNum || null, //图书借出数
                    'stockNum':self.infoForm.stockNum || null, //图书库存数
                    'bookNum':self.infoForm.bookNum || null, //图书总数
                    'bookState':self.infoForm.bookState, //图书状态 0-》上架，1-》以下架

                    'orderBy': self.orderBy || null, //排序字段
                    'pageNum': self.pageNum || 1, //当前页数
                    'pageSize': self.pageSize || 10, //每页展示条数
                    'sort': self.sort || null, //排序方式
                }
                self.$axios.post('/manage/book/list',data).then(res =>{
                    try {
                        self.list = res.data.data
                        self.total = res.data.total
                        self.listLoading = false
                    }catch(err){
                        self.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.listLoading = false
                })
            },
        }
    }
</script>

<style scoped>

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }

</style>
